<template>
	<view class="container">
		<view class="content-wrap">
				<view class="title-bar">
					<image class="title-img" src="../../static/img/title/title_jbxx.png" mode="widthFix"></image>
				</view>
				
				<view class="card info-card">
					<view class="row">
						<view class="label">真实姓名</view>
						<view class="value">{{schedulePerson.name}}</view>
					</view>
					<view class="row">
						<view class="label">身份证号</view>
						<view class="value">{{schedulePerson.idNumber}}</view>
					</view>
					<view class="row">
						<view class="label">认证结果</view>
						<view class="value" v-if="schedulePerson.identifyResult==0 || schedulePerson.submitTimes<3">{{schedulePerson.identifyMessage?schedulePerson.identifyMessage:''}}</view>
						<view v-else style="display: flex; justify-content: space-between; align-items: center;">
							<view class="value">{{schedulePerson.identifyMessage?schedulePerson.identifyMessage:''}}</view>
							<view class="button identify-button" @click="reIdentify">重新认证</view>
						</view>
					</view>
					<view class="row">
						<view class="label">审核结果</view>
						<view class="value">{{schedulePerson.checkResult?schedulePerson.checkResult:''}}</view>
					</view>
					<view class="row">
						<view class="label">认证照片</view>
						<view class="value">
							<view class="face-wrap">
								<image class="face-img" v-if="schedulePerson.faceUrl" :src="schedulePerson.faceUrl" mode="widthFix" @click="imageView(schedulePerson)"></image>
								<!-- <image v-for="picture in pictures" class="face-img" v-if="picture.faceUrl" :src="picture.faceUrl" mode="widthFix" @click="imageView(picture)"></image> -->
							</view>
						</view>
					</view>
					<view class="row">
						<view class="label">认证视频</view>
						<view class="value">
							<video class="face-img" v-if="schedulePerson.faceVideoUrl" :src="schedulePerson.faceVideoUrl"></video>
						</view>
					</view>
				</view>
				<view v-if="user.permissions && user.permissions.includes('identify:apply:approve')">
					<view class="button-wrap" v-if="schedulePerson.checkResult != '审核通过' && schedulePerson.checkResult != '注销资格'">
						<view class="button confirm-button" @click="check('审核通过')">审核通过</view>
						<view class="button cancel-button" @click="check('审核不过')">审核不过</view>
						<view class="button cancel-button" @click="check('注销资格')">注销资格</view>
					</view>
					<view class="button-wrap" v-else>
						<view class="button confirm-button disabled">审核通过</view>
						<view class="button cancel-button disabled">审核不过</view>
						<view class="button cancel-button disabled">注销资格</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { ApiIdentifySchedulePerson, ApiIdentifyMaterial } from "@/api/identify/index.js"
	import Store from '@/store/index.js';
	
	export default {
		data() {
			return {
				user: {},
				schedulePerson: {
					id: null,
					scheduleId: null,
					personId: null,
					faceUrl: null
				},
				person: {},
				infos: [],
				pictures: []
			}
		},
		created() {
			this.user = this.$store.getUser();
		},
		onLoad(option) {
			this.schedulePerson.scheduleId = option.scheduleId;
			if(option.id){
				this.schedulePerson.id = option.id;
				//服务人员操作：
				this.person = {
					personId: option.id,
					name: option.name,
					idNumber: option.idNumber,
				}
				//查询认证记录：判断是否以提交有效认证
				this.getSchedulePersonById(option.id);
				//
				this.getIdentifyMaterial(option.id);
			} else {
				//受助人员自己操作：
				this.person = {
					personId: this.user.id,
					name: this.user.name,
					idNumber: this.user.idNumber,
				}
				//查询认证记录：判断是否以提交有效认证
				this.getSchedulePerson();
			}
			
		},
	
		methods: {
			
			getSchedulePersonById(id){
				ApiIdentifySchedulePerson.getInfo(id).then(res=>{
					this.schedulePerson = res.data;
				})
			},
			
			getSchedulePerson(){
				ApiIdentifySchedulePerson.list({
					scheduleId: this.schedulePerson.scheduleId,
					personId: this.user.id
				}).then(res=>{
					this.schedulePerson = res.data[0];
					//
					this.getIdentifyMaterial(res.data[0].id);
				})
			},
			
			//获取认证材料
			getIdentifyMaterial(schedulePersonId){
				ApiIdentifyMaterial.list({
					schedulePersonId: schedulePersonId,
					fileType: '照片',
					status: '1'
				}).then(res=>{
					this.pictures = res.data;
				})
			},
			
			check(checkResult){
				let that = this;
				uni.showModal({
					title: ' 提示',
					content: '确定执行【'+checkResult+'】操作？',
					success(result) {
						if(result.confirm){
							let data = {
								id: that.schedulePerson.id,
								personId: that.schedulePerson.personId,
								programId: that.schedulePerson.programId,
								year: that.schedulePerson.year,
								checkResult: checkResult,
								checkStatus: checkResult=='审核不过'?'0':'1'
							};
							if(checkResult=='审核通过' || checkResult=='注销资格'){
								data.identifyStatus = '1';		//标记认证完成
							}
							ApiIdentifySchedulePerson.check(data).then(res=>{
								if(res.code==200){
									that.schedulePerson.checkResult = checkResult;
									uni.showToast({
										title: checkResult
									})
									//设置刷新标志
									uni.setStorageSync('person-check-status-change', true);
								}else{
									uni.showToast({
										icon: 'error',
										title: res.msg
									})
								}
							})
						}
					}
				})
			},
			
			reIdentify(){
				uni.showModal({
					title: ' 提示',
					content: '确定执行【重新认证】操作？',
					success(result) {
						if(result.confirm){
							ApiIdentifyMaterial.redoIdentify(id).then(res=>{
								if(res.code==200){
									//设置刷新标志
									uni.setStorageSync('person-check-status-change', true);
									uni.navigateBack();
								}else{
									uni.showToast({
										icon: 'error',
										title: res.msg
									})
								}
							})
						}
					}
				})
			},
			
			imageView(picture){
				uni.navigateTo({
					url: '/pages/common/preview?src='+picture.faceUrl
				})
			}
			
		},
	}
</script>

<style>
	.container {
		width: 100vw;
	}
	.content-wrap{
		width: 750upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	.title-bar{
		margin-bottom: 30upx;
	}
	.title-bar .title-img{
		width: 180upx;
	}
	.info-card{
		font-size: 14px;
	}	
	.info-card .row{
		display: flex;
		padding: 15upx 0;
		font-size: 14px;
	}
	.info-card .row .label{
		color: #999999;
		flex-wrap: nowrap;
		word-break: keep-all;
	}
	.info-card .row .value{
		color: #333333;
		margin-left: 20upx;
		font-weight: bold;
	}
	.face-wrap{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.face-wrap :not(:last-child){
		margin-right: 20upx;
	}
	.face-img{
		width: 200upx;
		height: 200upx;
	}
	.button-wrap {
		width: 100%;
		padding: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.button-wrap .button{
		margin: 40upx;
		padding: 20upx;
		text-align: center;
		border-radius: 50upx;
		color: white;
		flex-grow: 1;
		font-weight: bold;
	}
	.button-wrap .confirm-button{
		background: linear-gradient(to bottom, #FF8218, #FFAA00 );
	}
	.button-wrap .cancel-button{
		background: linear-gradient(to bottom, #6B9EFF, #90CCFD );
	}
	.button-wrap .disabled{
		color: #666666;
	}
	.identify-button{
		padding: 20upx 40upx;
		text-align: center;
		border-radius: 50upx;
		color: white;
		font-weight: bold;
		background: linear-gradient(to bottom, #FF8218, #FFAA00 );
	}
	
</style>
